<!-- 首页 -->
<template>
  <div class="home">
    <div class="homeNav">
      <div class="icon" @click="showMaskFn">
        <i class="iconfont icon-1"></i>
      </div>
      <div class="titleNa">首页</div>
    </div>
    <div class="swipe-wrap">
      <mt-swipe :auto="4000" :show-indicators="true">
        <mt-swipe-item v-for="getHomeData in getHomeDatas.bannerLists" :key="getHomeData.id">
          <img :src="getHomeData.imgurl" alt />
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <div class="videoBox">
      <div class="videoTitle">
        <div class="video-icon">
          <i class="iconfont icon-kefu"></i>
        </div>
        <div class="text">推荐视频</div>
      </div>
      <video src="@/assets/images/myvideo.mp4" controls autoplay loop muted></video>
    </div>
    <div class="mask" v-if="showMask" @click="hideMaskFn"></div>
    <transition name="hg">
      <div class="context" v-if="showMask" @click="hideMaskFn">
        <h1>个人中心</h1>
        <ul>
          <li>
            <div class="icon">
              <i class="iconfont icon-wodedangxuan"></i>
            </div>
            <div class="text">Bob</div>
          </li>
          <li>
            <div class="icon">
              <i class="iconfont icon-daifukuan"></i>
            </div>
            <div class="text">$100</div>
          </li>
          <li>
            <div class="icon">
              <i class="iconfont icon-icon4"></i>
            </div>
            <div class="text">123456788</div>
          </li>
          <li>
            <div class="icon">
              <i class="iconfont icon-wodedangxuan"></i>
            </div>
            <div class="text">Bob</div>
          </li>
        </ul>
      </div>
    </transition>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到components对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      showMask: false
    };
  },
  //计算属性 类似于data概念
  computed: {
    getHomeDatas() {
      return this.$store.state.homeListDatas;
    }
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    showMaskFn() {
      this.showMask = true;
    },
    hideMaskFn() {
      this.showMask = false;
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$store.dispatch("actChangeHomeListDatas");
  },

  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang="less">
.hg-enter,
.hg-leave-to {
  transform: translateX(-100%);
}

.hg-enter-active,
.hg-leave-active {
  transition: all 0.3s linear;
}
.home {
  width: 100%;
  position: relative;
  .homeNav {
    width: 100%;
    height: 4.4rem;
    display: flex;
    justify-content: space-between;
    line-height: 4.4rem;
    font-size: 2rem;
    .icon {
      width: 25%;
      i {
        font-size: 3rem;
        margin-left: 1rem;
      }
    }
    .titleNa {
      width: 75%;
      padding-left: 25%;
    }
  }
}
.swipe-wrap {
  width: 100%;
  height: 20rem;
  margin: 1rem 1rem;
  width: calc(100% - 2rem);
  border-radius: 1rem;
  img {
    width: 100%;
    height: 100%;
  }
}
.videoBox {
  width: 100%;
  height: 24.4rem;
  margin: 1rem 1rem;
  width: calc(100% - 2rem);
  border-radius: 1rem;
  .videoTitle {
    width: 100%;
    height: 4.4rem;
    display: flex;
    text-align: center;
    .video-icon {
      width: 4.4rem;
      height: 4.4rem;
      line-height: 4.4rem;
      i {
        font-size: 2.2rem;
      }
    }
    .text {
      line-height: 4.4rem;
      font-size: 1.6rem;
    }
  }
  video {
    width: 100%;
    height: 20rem;
  }
}
.mask {
  width: 100%;
  height: 66.5rem;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999;
}
.context {
  width: 90%;
  height: 66.5rem;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1000;
  background-color: #efefef;
  h1 {
    padding: 1rem;
    text-align: center;
    border-bottom: 2px solid #ccc;
  }
  ul {
    margin-top: 10rem;
    li {
      width: 100%;
      height: 4.4rem;
      display: flex;
      text-align: center;
      .icon {
        margin-left: 1rem;
        i {
          font-size: 2.2rem;
        }
      }
      .text {
        margin-left: 1rem;
        font-size: 1.6rem;
        font-weight: bold;
      }
    }
  }
}
</style>
